<template>
<div>
  <div id="bg">
    <!--card 组件-->
    <el-card class="box-card">
      <h3>logo</h3>
      <!--prefix-icon是图标 v-model是data的绑定的 clearable清除数据  -->
      <el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户" v-model="username" clearable>
      </el-input>
      <el-input prefix-icon="el-icon-s-goods" placeholder="请输入密码" v-model="userpass" show-password>
      </el-input>
      <p class="outherChoose">
        <span></span>
        <span>忘记密码请从新注册
          <div class=""></div>
        </span>
      </p>
      <!--@click绑定事件-->
      <el-button type="primary" @click="toLogin()">登录</el-button>
      <el-button type="primary" @click="toRegister()">注册会员</el-button>
      <p style="color:red;font-size:13px;height:15px;margin-top:5px">
        <!-- v-show 做判断 -->
        <span v-show="madIsNullOfTip">密码或用户名不能为空</span>
      </p>
    </el-card>
  </div>
</div>
</template>

<script>
    // 把json变from
    import qs from 'qs'
    export default {
        data() {
            return {
                username: "",
                userpass: "",
                madIsNullOfTip: false,
                loginCheck: false
            };
        },
        methods: {
            toRegister() {
                // 路由跳转，在router文件
                this.$router.replace("/register");
            },
            toLogin() {
                // 先执行else在执行if，madIsNullOfTip是判断输入的值是否正确，也可以用element ui的方法来限制
                if (this.username.length > 0 && this.userpass.length > 0) {
                    this.madIsNullOfTip = false;
                    // $http是axios在main.js中挂载
                    this.$http({
                            method: "post",
                            url: "http://47.106.237.228:10002/user/login",
                            headers: {
                                "X-Requested-With": "XMLHttpRequest"
                            },
                            // qs是把json变成表单。
                            data: qs.stringify({
                                username: this.username,
                                password: this.userpass
                            })
                        })
                        .then(res => {
                            // console.log(res);
                            // console.log(res.data.state);
                            // 判断请求返回的值是sucsess就成功
                            if (res.data.status == "2") {
                                return alert("请输入正确的账号和密码");
                            } else if (res.data.status == "1") {
                                console.log(res.data.status, "登录成功");
                                //alert("登录成功");
                                // 组件通信把res.data的值放到store中去
                                this.$store.commit("loginStateChange", res.data);
                                // 把loginState存到保存数据，类似于token，用来判断登录状态，loginState=true
                                sessionStorage.setItem("loginState", true);
                                // sessionStorage.setItem("showUserName", res.data);
                                // 登录成功跳转路由到首页
                                this.$router.replace("/");
                            }
                            console.log(res);
                            // alert(res);
                        })
                        .catch(err => {
                            console.log(err);
                        });

                    console.log("login success");
                } else {
                    this.madIsNullOfTip = true;
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    #bg {
        height: 100vh;
        background: url("../../assets/img/login-page-bg.jpg");
        background-size: cover;
        padding-top: 100px;
        box-sizing: border-box;
    }
    
    .outherChoose {
        display: flex;
        justify-content: space-between;
        color: rgb(185, 184, 184);
        font-size: 12px;
        margin-bottom: 20px;
        span {
            cursor: pointer;
        }
    }
    
    .text {
        font-size: 14px;
    }
    
    .item {
        padding: 18px 0;
    }
    
    .box-card {
        width: 400px;
        padding: 60px 70px;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
        .el-input {
            margin: 10px 0 10px 0;
            box-sizing: border-box;
        }
    }
    
    .el-button {
        margin: 0 auto;
        width: 95px;
        margin-top: 5px;
        margin-left: 9px;
    }
</style>